/* 设置表单组的样式 */
.form-group {
    display: flex;
    align-items: center;
    /*margin-bottom: 0px;!* 增加间距 *!*/
    gap: 10px; /* 增加元素之间的间距 */
}

/* 设置标签的样式 */
.form-group label {
    width: 150px;
    text-align: right;
    margin-right: 10px; /* 增加间距 */
    font-size: 20px;
    color: #FFFFFF;
}

/* 设置输入框的样式 */
.form-group input[type="text"],
.form-group input[type="date"],
.form-group input[type="file"],
.form-group select,
.form-group textarea{
    padding: 10px;
    border: 1px solid #1b1818;
    border-radius: 4px;
    background: #969a9f;
    opacity: 0.7;
    width: 100%;
    box-sizing: border-box;
    font-size: 20px;
    transition: border-color 0.3s; /* 边框颜色变化动画 */
}

/* 设置输入框获得焦点时的样式 */
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: #007bff; /* 蓝色边框 */
    outline: none; /* 去除默认的外框 */
}

/* 设置复选框和单选按钮的样式 */
.form-group input[type="radio"] {
    margin-right: 0px;/* 增加间距 */
    accent-color: #007bff; /* 单选按钮的颜色 */
}

.button-container {
    display: flex; /* 使用Flexbox布局 */
    justify-content: space-between; /* 使按钮之间的间隔均匀分布 */
    align-items: center; /* 垂直居中对齐 */
    margin: 20px 0; /* 添加一些上下外边距 */
}


/* 按钮样式 */
.button {
    background: #8e8383; /* 背景颜色 */
    border: 0; /* 去掉边框 */
    padding: 0; /* 去掉内边距 */

    flex: 1; /* 使每个按钮占据相同的空间 */
    margin: 0 10px; /* 为每个按钮添加左右外边距 */

    font-family: inherit; /* 继承字体 */
    font-size: 40px; /* 字体大小.. */
    font-weight: 600; /* 字体粗细 */
    height: 50px; /* 高度 */
    width: 20%;/* 宽度 */
    -webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%); /* 剪切路径 */
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
    text-transform: uppercase; /* 大写字母 */
    text-align: center; /* 文本居中 */
    padding: 0 20px; /* 内边距 */
    cursor: pointer; /* 指针样式 */
}

.button:focus { /* 按钮聚焦效果 */
    outline: none; /* 去掉轮廓线 */
}

.button:before { /* 按钮悬停效果 */
    content: "";
    position: absolute; /* 绝对定位 */
    top: 0; right: 0; bottom: 0; left: 0; /* 充满整个按钮 */
    background: #1be457; /* 背景颜色 */
    transform-origin: right; /* 变换原点 */
    transform: scaleX(0); /* 初始不可见 */
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); /* 过渡效果 */
}

.button:hover:before, .button:focus:before { /* 按钮悬停和聚焦效果 */
    transform-origin: left center; /* 变换原点 */
    transform: scaleX(1); /* 扩展到整个按钮 */
}

/* 按钮图标样式 */
.button:hover .button__icon,
.button:focus .button__icon {
    transform: translate3d(10px, -50%, 0); /* 平移效果 */
}

.button__label {
    position: relative; /* 相对定位 */
    font-size: 16px;
    color: #111111;
}

.button__icon {
    position: absolute; /* 绝对定位 */
    top: 50%; /* 定位 */
    transform: translate3d(0, -50%, 0); /* 平移效果 */
    opacity: 0.7;
    right: 25px; /* 定位 */
    width: 24px; /* 宽度 */
    height: 24px; /* 高度 */
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); /* 过渡效果 */
}
.button__icon:before {
    content: ""; /* 伪元素内容为空 */
    height: 1px; /* 高度 */
    width: 100%; /* 宽度 */
    background: black; /* 背景颜色 */
    position: absolute; /* 绝对定位 */
    left: 0; /* 定位 */
    top: 12px; /* 定位 */
}
.button__icon:after {
    content: ""; /* 伪元素内容为空 */
    transform: rotate(45deg); /* 旋转效果 */
    border-top: 1px solid black; /* 边框 */
    border-right: 1px solid black; /* 边框 */
    width: 8px; /* 宽度 */
    height: 8px; /* 高度 */
    position: absolute; /* 绝对定位 */
    right: 0; /* 定位 */
    top: 8px; /* 定位 */
}
/* 容器样式 */
.container {
    display: flex; /* 使用Flexbox布局 */
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中 */
    min-height: 70vh; /* 最小高度为视口高度 */
    height: 100%; /* 高度100% */
    width: 100%; /* 宽度100% */
    overflow-y: auto; /* 垂直溢出滚动 */
    transform: translate(0%, 15%);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25); /* 添加阴影 */
    background: rgba(0, 0, 0, 0.50); /* 背景颜色 */
}

/* 设置关闭按钮的样式 */
.close-btn {
    float: right;
    font-size: 25px;
    cursor: pointer;
    color: #ffffff;
    transform: translateY(250%);
}

.close-btn:hover {
    color: #007bff;
}